import React, { useState, useCallback } from 'react';
import { Splitter } from 'antd';
import MainPanel from '@/components/leftpanels/main-panel';
import Preview from '@/components/rightpanels/preview';
import Outpainting from '@/components/rightpanels/outpainting';
import styles from './index.less';

export default function HomePage() {
  const [showOutpainting, setShowOutpainting] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>();
  const [currentTaskId, setCurrentTaskId] = useState<string | null>(null);
  const [currentModel, setCurrentModel] = useState<string>('');

  const handleTaskGenerated = useCallback((taskId: string, model: string) => {
    setCurrentTaskId(taskId);
    setCurrentModel(model);
    setShowOutpainting(false);
  }, []);

  //设置页面左右分栏及多页面渲染
  return (
    <>
      <div className={styles.homePage}>
        <Splitter>
          <Splitter.Panel collapsible={{ start: true }} defaultSize="30%" max="35%" min="30%" resizable>
            <MainPanel
              imageUrl={imageUrl}
              setImageUrl={setImageUrl}
              onTaskGenerated={handleTaskGenerated}
            />
          </Splitter.Panel>
          <Splitter.Panel resizable>
            <Preview
              taskId={currentTaskId}
              model={currentModel}
              onOutpaintingClick={() => setShowOutpainting(true)}
              onTaskGenerated={handleTaskGenerated}
            />

            {showOutpainting && (
              <div style={{
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                zIndex: 10,
                background: '#fff'
              }}>
                <Outpainting
                  imageUrl={imageUrl}
                  onClose={() => setShowOutpainting(false)}
                  onTaskGenerated={handleTaskGenerated}
                />
              </div>
            )}
          </Splitter.Panel>
        </Splitter>
      </div>
    </>
  );
}